<template>
    <div class="topper">
        <div class="map">
            <van-icon name="location" color="#fff" />
            <span>圆融时代广场(久光...)</span>
        </div>
        <div class="search">
            <van-icon name="search" size="18" />
            <input type="text" placeholder="输入商品名称">
        </div>
    </div>
</template>

<script>
// 在需要的组件中
// import $ from 'jquery'
export default {
    name:"HomeTop"
}
</script>

<style lang="less">
.topper{
    box-sizing: border-box;
    padding: 0 .4rem;
    width: 100vw !important;
    height: 4rem;
    // background: blue;
    align-items: center;
    display: flex;
    .map{
        width: 50%;
        height: 2rem;
        background: rgba(22, 19, 19, 0.5);
        border-radius: .9rem;
        margin-right: .4rem;
        line-height: 2rem;
        text-align: center;
        color: #fff;
        overflow: hidden;
        box-sizing: border-box;
        padding: 0 .3rem;
    }
    .search{
        width: 50%;
        display: flex;
        height: 2rem;
        border-radius: .9rem;
        background: #f8f8f8;
        align-items: center;
        box-sizing: border-box;
        padding: 0 .8rem;
        input{
            border: none;
            height: 2rem;
            background: none;
            width: 80%;
        }
    }
}
.active{
	background: #fff;
}

</style>